<template>
  <div class="use">
    <el-button type="success" class="btn" @click="use" v-show="!isShow"
      >确认</el-button
    >
    <el-result
      icon="success"
      title="使用成功"
      :subTitle="tip"
      v-show="isShow && status === 'success'"
    >
      <template slot="extra">
        <el-button
          type="primary"
          size="medium"
          @click="$router.push(`/booking/sights/detail/${id}`)"
          >返回</el-button
        >
      </template>
    </el-result>
    <el-result
      icon="warning"
      title="警告"
      subTitle="预约已使用，请勿重复使用"
      v-show="isShow && status === 'warning'"
    >
      <template slot="extra">
        <el-button
          type="primary"
          size="medium"
          @click="$router.push('/private/booking')"
          >返回</el-button
        >
      </template>
    </el-result>
    <el-result
      icon="error"
      title="使用失败"
      subTitle="预约状态错误"
      v-show="isShow && status === 'error'"
    >
      <template slot="extra">
        <el-button
          type="primary"
          size="medium"
          @click="$router.push('/private/booking')"
          >返回</el-button
        >
      </template>
    </el-result>
  </div>
</template>

<script>
import { useSightsBooking } from "@/api/user/booking";

export default {
  name: "SightsBookingUse",
  props: ["id"],
  data() {
    return {
      isShow: false,
      status: "",
      time: 3,
      tip: "",
      timer: null,
    };
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    // 预约使用
    async use() {
      const res = await useSightsBooking({ id: this.id });
      this.isShow = true;
      this.status = res.data;
      if (this.status && this.status === "success") {
        this.tip = `将在${this.time}秒后自动跳转，请稍后...`;
        this.timer = setInterval(() => {
          if (this.time === 0) {
            this.$router.push(`/booking/hotel/detail/${this.id}`);
          }
          this.time--;
          this.tip = `将在${this.time}秒后自动跳转，请稍后...`;
        }, 1000);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.use {
  .btn {
    margin-top: 100px;
    width: 90vw;
  }
}
</style>